<template>
  <view>
    <view class="settle-box">
      <view class="left">
          <radio :checked="isFullChecked" @click="allCheck" color="#c00000"/>
      </view>
      <view class="center">
        合计:<text class="price"> ¥{{allPrice}}</text>
      </view>
      <view @click="settle" class="right">
        结算 {{checkedCount}}
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters,mapMutations,mapState } from 'vuex'
  export default {
    name:"my-settle",
    data() {
      return {
        token: uni.getStorageSync('token'),
        // 获取窗口高度
        wh:0,
      };
    },
    computed:{
      ...mapState('m_user',['address']),
      ...mapState('m_cart',['cart']),
      ...mapGetters('m_cart',['total','checkedCount','allPrice']),
      ...mapGetters('m_user',['addstr']),
      // 判断全选流程 
      isFullChecked(){
        return this.total === this.checkedCount
      }
    },
    methods:{
      ...mapMutations('m_cart',['unpdateAllState']),
      ...mapMutations('m_cart',['undateC']),
      // 储存购物车登录跳转的重定向
      ...mapMutations('m_user',['updateRedirectInfo']),
      // 获取商品的总价格
      allCheck(){
        this.unpdateAllState(!this.isFullChecked)
      },
      //! 定义一个倒计时跳转功能
      // 1. 弹窗倒计时功能
      delayShowTips(){
        // 2. 设置定时器执行的时间
     let second = 3
     // 3. 定时器有1秒延迟 需要提前执行一次取消延迟
     this.showTips(second)
     // 4. 定义一个持续定时器
     let timer = setInterval(()=>{
       // 5. 自减去秒数 实现倒计时
          second--
          if(second === 0){
            // 6. 如果到时间 清空定时器
            clearInterval(timer) 
            // 7. 倒计时结束后 跳转到登录页面
            uni.switchTab({
              url:'/pages/my/my',
              // 传递一个跳转登录的参数 实现登录后能自动跳转回购物车
              // 由于页面的路径和类型都不一样, 参数要是一个对象 {type(类型),from(来自)}
              // switchTab页面无法传参 并且跨组件 所有需要vuex做传参(数据共享)
              // (1) 在跳转都进行数据传参(把参数储存到Vuex中)
              // (2) 在Vuex的user定义返回参数对象和方法
              // (3) 调用Vuex中修改跳转参数的方法(储存购物车登录跳转的重定向)
             success: () => { 
               // 跳转成功后向Vuex里面储存重定向
              this.updateRedirectInfo({
                // 储存类型
                  type:'switchTab',
                // 来自组件路径
                  from:'/pages/cart/cart'
              })
             }
           })
            return
          }
          //8. 在定时器中持续调用弹出层方法
          this.showTips(second)
        },1000)
      },
      // 9. 倒计弹出层方法
      showTips(n){
        uni.showToast({
          // 设置图标
          icon: 'none',
          // 提示持续时间(需要比定时器时间长)
          duration: 1500,
          // 提示文本
          title:`请在登录后结算,在${n}秒后自动跳转`,
          // 添加遮罩层(防止触摸)
          mask:true
        })
      },
      // 进行商品结算
      settle(){
        console.log(this.cart)
        // 判断用户是否勾选 
        if(this.checkedCount <= 0) return uni.$showMsg('没有选中商品哦')
        // 判断用户是否填写了收货地址
        if(Object.keys(this.address).length <= 0) return uni.$showMsg('请选择收货地址')
        // 判断用户是否登录(通过token判断)
        // 如果没登录 自动跳转到登录页
        if(!this.token){
          // 倒计时三秒自动跳转到登录页面 当登录完成后 自动跳转回购物车
          this.delayShowTips() 
          return
        }
        // 调用支付功能
        this.payOrder()
      },
      // 进行支付功能
    async payOrder(){
        /**
         * 订单结算三个步骤
         * 1. 创建订单 - 自己服务器的接口
         * 2. 订单预支付 - 自己服务器接口
         * 3. 支付 - 微信接口
         */
        // 1. 创建订单的参数(后端需求的参数)
        const params = {
          // 订单的总价格 - 正常情况下用Vuex中的总价(测试0.01)
          order_price: 0.01,
          // 收货地址 - Vuex的m_user模块getters中取出addstr
          consignee_addr: this.addstr,
          // 要结算的商品列表
          goods: this.cart.filter(e =>e.goods_state).map(e=>{
            // 筛选结算需要的数据
            return{
              goods_id: e.goods_id,
              goods_number: e.goods_count,
              goods_price: e.goods_price
            }
          })
        }
        // 2. 创建订单
        const orderRes = await uni.$http.post('/api/public/v1/my/orders/create', params)
        if(orderRes.data.meta.status !== 200) return uni.$showMsg('创建订单失败')
        // 3. 订单预支付
        const order_number = orderRes.data.message.order_number
        const preRes = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number})
        if(preRes.data.meta.status !== 200) return uni.$showMsg('创建订单失败')
        // 4. 进行支付效果(uniapp提供)
        const payParams = preRes.data.message.pay
        const [err,succ] = await uni.requestPayment(payParams)
        // 5. 判断支付是否失败成功
        if(err) return uni.$showMsg('支付失败')
        // 6. 查询订单状态 并且清空付款的购物车
        const checkRes = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number })
        if(checkRes.data.meta.status !== 200) return uni.$showMsg('支付失败')
        uni.showToast({
          title:'支付成功!'
        })
        // 购物成功后 清理该购物车
        this.undateC(this.cart.filter(e => !e.goods_state))
      }
    }
  }
</script>

<style lang="scss">
.settle-box{
  position:fixed ;
  bottom: 0px;
  width: 100%;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  border-top: 1px solid #F0F0F0;
  font-size: 12px;
  padding-left: 5px;
    .center{
        z-index: 99999;
      .price{
       font-size: 16px;
       color: #c00000;
      }
    }
     .right{
       width: 90px;
       line-height: 50px;
       color: #FFFFFF;
       text-align: center;
       background-color: #c00000;
     }
}
</style>
